<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canva可画_在线设计协作平台_平面设计作图软件_视觉办公套件 - Canva中文官网</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        body {
            background-color: #fff;
        }

/* 最大底部盒子宽度设定（除导航栏外） */
        .maxbox {
            margin: 0 auto;
            max-width: 1700px;
            background-color: #fff;
        }       

/* 头部导航栏 */
        /* 导航栏板块 */
        .g-header {
            position: fixed;
            z-index: 99;
            display: flex;
            width: 100%;
            height: auto; 
            background-color: #fff;
            box-shadow: 0 1px 10px #b1b0b0;
        }

        /* 字体颜色 */
        div span a {
            color: black;
        }

        /* 可点击图标 */
        .Logo {
            flex: 2;
            display: block;
            margin-top: 10px;
            width: 100%;
            height:80%;
        }

        /* 工具栏 */
        div span {
            flex: 1;
            margin-top: 12px;
            margin-bottom: 12px;
            margin-left: 10px;
            width: 20px;
            border-radius: 36px;
            font-size: small;
            line-height: 38px;
            text-align: center;
            background-color: #fff;

        }

        /* 鼠标悬停流光效果 */
        .u-tool-1:hover {
            z-index: 1;
            background:
                linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            animation: animate 8s linear infinite;
        }

        /* 鼠标悬停流光效果 */
        @keyframes animate {
            from {
                background-position: 0%;
            }

            to {
                background-position: 400%;
            }
        }

        .blank {
            flex: 4;
            background-color: #fff;
        }

        /* 登录按钮 */
        .u-tool-3 {
            margin: 12px;
            width: 5%;
            height: auto;
            border: none;
            border-radius: 10px;
            border: 1px solid rgb(223, 221, 220);
            background-color: #fff;
            cursor: pointer;
        }

        /* 注册按钮 */
        .u-tool-4 {
            margin: 12px;
            width: 5%;
            height: auto;
            border: none;
            border-radius: 10px;
            background-color: blueviolet;
            cursor: pointer;

        }

        /* 按钮文字颜色 */
        .u-tool-4 strong {
            color: #fff;
        }

        .u-tool-2:hover,
        .u-tool-3:hover {
            background-color: rgba(223, 221, 220, 0.708);
        }

        .u-tool-4:hover {
            background-color: rgb(121, 40, 197);
        }

    /* 模板素材 */
        /* 下拉列表显示 */
        .nav-bar-list1 {
            z-index: 99;
            display: none;
            position: absolute;
            width: auto;
            height: auto;
            border-radius: 10px;
            background-color: #fff;
            box-shadow: 0 1px 10px #b1b0b0;
        }

        .g-header span:hover>.nav-bar-list1 {
            display: block;
        }

        /* 下拉列表内的内容 */
        /* 左侧文字容器 */
        .nav-bar-list1 li {
            float: left;
            width: 12%;
            height: auto;
            border-radius: 10px;
            background-color: #fff;
        }

        /* 左侧文字 */
        .nav-bar-list1 p {
            margin-left: 10px;
            color: #000000;
            font-size: 15px;
            line-height: 34px;
            text-align: left;
        }


        /* 右侧图文 */
        .container1 {
            float: left;
            margin-top: 10px;
            padding-left: 2px;
            width: 37%;
            height: auto;
            border-left: 1px solid #e6e1e1;
            background-color: #fff;
        }



    /* 设计场景 */
        /* 下拉列表显示 */
        .nav-bar-list2 {
            z-index: 99;
            display: none;
            position: absolute;
            margin-left: -6%;
            width: auto;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 1px 10px #b1b0b0;
            background-color: #fff;

        }

        .g-header span:hover>.nav-bar-list2 {
            display: block;
        }

        /* 下拉列表内的内容 */
        /* 左侧文字容器 */
        .nav-bar-list2 li {
            float: left;
            width: 20%;
            height: auto;
            border-radius: 10px;
            background-color: #fff;
        }

        /* 左侧文字 */
        .nav-bar-list2 p {
            margin-left: 10px;
            font-size: 15px;
            line-height: 34px;
            text-align: left;
            color: #000000;
        }

        /* 右侧图文 */
        .container2 {
            float: left;
            margin-top: 10px;
            margin-left: 18px;
            padding-left: 2px;
            width: 35%;
            height: auto;
            border-left: 1px solid #e6e1e1;
            background-color: #fff;
        }

    /* 资源课程 */
        /* 下拉列表显示 */
        .nav-bar-list3 {
            z-index: 99;
            display: none;
            position: absolute;
            margin-left: -12%;
            width: auto;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 1px 10px #b1b0b0;
            background-color: #fff;
        }

        .g-header span:hover>.nav-bar-list3 {
            display: block;
        }

        /* 下拉列表内的内容 */
        /* 左侧文字容器 */
        .nav-bar-list3 li {
            float: left;
            width: 15%;
            height: auto;
            border-radius: 10px;
            background-color: #fff;
        }

        /* 左侧文字 */
        .nav-bar-list3 p {
            margin-left: 10px;
            color: #000000;
            font-size: 15px;
            line-height: 34px;
            text-align: left;
        }

        /* 右侧图文 */
        .container3 {
            float: left;
            margin-top: 10px;
            padding-left: 2px;
            width: 37%;
            height: auto;
            border-left: 1px solid #e6e1e1;
            background-color: #fff;
        }

    /* 可画ai */
        /* 下拉列表显示 */
        .nav-bar-list4 {
            z-index: 99;
            display: none;
            position: absolute;
            margin-left: -16%;
            width: auto;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 1px 10px #b1b0b0;
            background-color: #fff;
        }

        .g-header span:hover>.nav-bar-list4 {
            display: block;
        }

        /* 下拉列表内的内容 */
        /* 左侧文字容器 */
        .nav-bar-list4 li {
            float: left;
            width: 15%;
            height: auto;
            border-radius: 10px;
            background-color: #fff;
        }

        /* 左侧文字 */
        .nav-bar-list4 p {
            font-size: 15px;
            line-height: 34px;
            text-align: left;
            color: #000;
            margin-left: 10px;
        }

        /* 右侧图文容器 */
        .container4 {
            float: left;
            padding-left: 2px;
            margin-top: 10px;
            width: 30%;
            height: auto;
            border-left: 1px solid #e6e1e1;
            background-color: #fff;
        }

        /* 图 */
        .icon4 {
            width: 250px;
            height: 210px; 
            border-radius: 10px;
        }

        /* 鼠标悬停放大 */
        .icon4:hover {
            transform: scale(1.06);
            border-radius: 10px;

        }

    /* 订阅方案 */
        /* 下拉列表显示 */
        .nav-bar-list5 {
            z-index: 99;
            display: none;
            position: absolute;
            margin-left: -26%;
            width: auto;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 1px 10px #b1b0b0;
            background-color: #fff;
        }

        .g-header span:hover>.nav-bar-list5 {
            display: block;
        }

        /* 下拉列表内的内容 */
        /* 左侧文字容器 */
        .nav-bar-list5 li {
            float: left;
            padding-bottom: 10px;
            width: 16%;
            height: auto;
            border-radius: 10px;
            background-color: #fff;
        }

        /* 左侧图片位置大小 */
        .list5-left-top {
            margin-top: 10px;
        }
        .list5-left-image {
            width:184px;
            height:180px;
            border-radius: 10px;
        }


        /* 左侧文字 */
        .nav-bar-list5 strong {
            font-size: 16px;
        }
        .nav-bar-list5 p {
            margin-left: 10px;
            color: #585656; 
            font-size: 14px; 
            line-height: 18px;
            text-align: left;
        }

        /* 右侧图文 */
        .container5 {
            float: left;
            margin-top: 10px;
            padding-left: 2px;
            width: 35%;
            height: auto;
            border-left: 1px solid #e6e1e1;
            background-color: #fff;
        }

        /* 左侧栏目文字鼠标悬停效果 */
        .list5-left-image:hover {
            transform: scale(1.05);
            border-radius: 10px;

        }

    /* 不同下拉列表的相同内容 */
        /* 表内左侧栏目文字鼠标悬停效果 */
        .text:hover {
            border-radius: 10px;
            background-color: #efeded;
            transform: scale(1.15);

        }
        /* 表内全部左侧栏目部分小标题鼠标悬停效果 */
        .underline:hover {
            text-decoration: underline;
        }

        /* 表内全部右侧项浮动容器 */
        .item {
            display: flex;
            align-items: flex-start;
            /* 顶部对齐 */
            gap: 15px;
            /* 图标与文字间距 */
            margin-bottom: 20px;
            border-radius: 6px;
        }

        /* 表内全部图标样式 */
        .icon {
            width: 60px;
            height: 60px;
            border-radius: 10px;
        }

        /* 表内全部文本内容区域 */
        .content {
            flex: 1;
            /* 等比例布局剩余空间 */
        }

        /* 表内全部图文标题样式 */
        .title {
            color: #000000;
            font-size: 15px;
            font-weight: 700;
            text-align: left;
        }

        /* 文本样式 */
        .desc {
            color: #929191;
            font-size: 14px;
            text-align: left;
            line-height: 20px;
        }

        /* 右侧标题鼠标悬停效果 */
        .item:hover {
            background-color: #f5f5f5;
        }

        .title:hover {
            text-decoration: underline;
        }

        /* 空白内容，用于填补头部导航栏下层空出的区域 */
        .Blank {
            width: 100%;
            height: 10vh;
            background-color: #fff;
        }


/* g-body-1 */
        /* 底部容器 */
        .g-body-1 {
            display: flex;
            flex-direction: column;
            margin-bottom: 40px;
            width: 100%;
            height: auto;
            background-color: #03a9f4;
        }

        /* 内容 */
        /* 文字和背景 */
        .part1 {
            flex: 5;
            padding-top: 22px;
            text-align: center;
            font-size: 80px;
            line-height: 230px;
            background-color: #fff;
        }

        /* 文字渐变效果 */
        .part1 span {
            font-size: 80px;
            /* 渐变背景 */
            background: linear-gradient(90deg, #4a7ecc, #540aaf, #a209c5);
            /* 裁剪背景到文字 */
            background-clip: text;
            -webkit-background-clip: text;
            /* 文字颜色透明，让背景显示出来 */
            color: transparent;
        }

        /* 文字和背景 */
        .part2 {
            flex: 2;
            color: #7f7a7a;
            text-align: center;
            font-size: 26px;
            background-color: #ffffff;
        }

        /* 按钮 */
        .part3 {
            flex: 1;
            background-color: #ffffff;
        }

        .part3 button {
            display: block;
            padding: 15px 44px;
            margin:20px auto;
            color: white;
            font-size: 16px;
            text-align: center;
            text-decoration: none;
            border: none;
            border-radius: 10px;
            background-color:blueviolet;
            cursor: pointer;
        }

        /* 鼠标悬停效果 */
        .part3 button:hover {
            background-color: rgb(121, 40, 197);
        }

/* g-body-2  瀑布动画,用css动画效果实现*/
        /* 底部容器 */
        .g-body-2 {
            display: flex;
            margin: 0 auto;
            justify-content: center;
            align-items: center;
            width: 90%;
            height: 320px;
        }

        /* 图框 */
        div.slide {
            width: 100%;
            height: 320px;
            overflow: hidden;
        }

        /* 最底层实际容器大小 */
        ul.list {
            position: relative;
            width: 9500px;
            height: 300px;
            animation: move 24s linear 0s infinite;
       /* 名称 持续时间 速率 延迟播放时间 播放次数 播放方向（normal向前播放；alternate偶次数向前，奇次数向反方向播放） */
        }

        /* 轮播动画效果显示 */
        @keyframes move {
            0% {
                transform: translate(0);
            }
            100% {
                transform: translate(-3074px);
            }

        }

         /* 图片 */
        .show {
            float: left;
            margin: 8px 8px;
            width: 240px;
            height: 300px;
            border-radius: 18px;
        }

        /* 鼠标悬停效果：静止 */
        .show:hover {
            border-radius: 10px;
            transform: scale(1.05);
        }
        .list:hover {
            animation-play-state: paused;
        }

/* g-body-3 */
        .g-body-3 {
            display: flex;
            flex-direction: column;
            margin: 0 auto;
            width: 80%;
            height: auto;
            background-color: #fff;
        }

    /* 主题：完美适配每位用户 */
        .title3 {
            flex: 1;
            font-size: 30px;
            font-weight: 600;
            text-align: center;
            line-height: 100px;
            background-color:#fff;
        }

    /* 主题下面的底部布局 */
        .container {
            display: flex;
            margin: 0 auto;
            width: 80%;
            height: auto;
            background-color: #fff;

        }

    /* 内部的三个文本框 */


        /* 白色背景盒子 */
        .block3-1 {
            position: relative;
            flex: 1;
            margin: 10px 10px;
            height: auto;
            border: 2px solid rgba(115, 114, 114, 0.086);
            border-radius: 14px;
            background-color: #d7d4d476;
        }

        /* 紫色背景盒子 */
        .block3-2,
        .block3-3 {
            position: relative;
            flex: 1;
            margin: 10px 10px;
            height: auto;
            border: 2px solid rgba(169, 94, 234, 0.336);
            border-radius: 14px;
            background-color: #a952ec49;
        }

        /* 盒子内部标签 */
        .block3-1 b,
        .block3-2 b,
        .block3-3 b {
            position: absolute;
            float: left;
            top: 20px;
            left: 20px;
            font-size: 10px;
            border-radius: 10px;
            background-color: #fff;
        }

        /* 盒子内部标题 */
        .block3-1 strong,
        .block3-2 strong,
        .block3-3 strong {
            margin-left: 18px;
            font-size: 20px;
            line-height: 132px;

        }

        /* 盒子内部文本 */
        .block3-1 p,
        .block3-2 p,
        .block3-3 p {
            margin-left: 20px;
            color:#585656;
            font-size: 16px;
        }

        /* 盒子内部按钮 */
        .block3-1 button,
        .block3-2 button,
        .block3-3 button {
            margin-left: 10%;
            margin-bottom: 14px;
            width: 80%;
            height: 44px;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            border: none;
            border-radius: 10px;
            background-color: blueviolet;
            cursor: pointer;
        }

        /* 盒子内部按钮鼠标悬停样式 */
        .block3-1 button:hover,
        .block3-2 button:hover,
        .block3-3 button:hover {
            background-color: #661dbf;
        }

    /* 下面的注意事项 */
        /* 底部容器 */
        .text3 {
            flex: 1;
            background-color: #fff;
        }

        /* 文本 */
        .text3 p {
            text-align: center;
        }

        /* 文本内链接 */
        .text3 a {
            text-decoration: underline;
        }

/* g-body-4 */


    /* 标题 */
        .title4 {
            margin: 35px auto;
            width: 80%;
            height: auto;
            color: #000;
            font-size: 30px;
            font-weight: 700;
            text-align: center;
            line-height: 30px;
            background-color: #fff;
        }

    /* 标题下面的图文容器 */
        .g-body-4 {
            margin: 0 auto;
            width: 80%;
            height: auto;
            background-color: #fff;
        }

        .main {
            width: 100%;
            height: auto;
            background-color: #fff;
            /* 使用grid进行布局 */
            display: grid;
            /*行的样式*/
            grid-template-rows:140px 140px 140px;
            /*列的样式*/
            grid-template-columns:40% 60%;
            overflow:hidden;
            /* 增加间距 */
            gap:10px;
        }

        input {
            display: none;
        }

    /* 分配格子 */
        /* 图片格子 */
        .tab {
            grid-row: 1/4;
            grid-column: 2/3;
            border-radius: 10px;
            background-color:#fff;
            /* 位移动画 */
            transition: 1s;
        }
        
        /* 图片背景大小 */
        .tab_s {
            width: 100%;
            height: 440px;
        }
        
        /* 图片背景 */
        .tab_s:first-child{
            background-color: #fff;
        }

        .tab_s:nth-child(2) {
            background-color:#fff;
        }

        .tab_s:nth-child(3) {
            background-color:#fff;
        }
        
        /* 文字格子 */
        .l1 {
            grid-row: 1/2;
            grid-column: 1/2;
            border-radius: 10px;
            background-color:#d7d4d476;
            overflow: hidden;
        }

        .l2 {
            grid-row: 2/3;
            grid-column: 1/2;
            border-radius: 10px;
            background-color:#d7d4d476;
            overflow: hidden;
        }

        .l3 {
            grid-row: 3/4;
            grid-column: 1/2;
            border-radius: 10px;
            background-color:#d7d4d476;
            overflow: hidden;
        }

        /* 文字调整 */
        .l1 strong,
        .l2 strong,
        .l3 strong {
            margin-left: 20px;
            font-size: 130%;
            line-height: 66px; 
        }

        .l1 p,
        .l2 p,
        .l3 p {
            margin-left: 20px;
            font-size: 90%;
            line-height: 24px; 
        }

        /* 鼠标悬停效果 */
        .l1:hover,
        .l2:hover,
        .l3:hover {
            background-color: #e4e4e4;
            transform: scale(1.01);
            cursor: pointer;
        }

        /* 设置图片大小 */
        .tab_s img {
            width: 98%;
            height: 440px;
            border-radius: 10px;
        }

        /* 控制内容平移 */
        #b1:checked ~ .tab {
            transform: translateY(0px);
        }
        #b2:checked ~ .tab {
            transform: translateY(-440px);
        }
        #b3:checked ~ .tab {
            transform: translateY(-880px);
        }

/* g-title-5 */
        .g-title-5 {
            margin: 0 auto;
            font-weight: 700;
            font-size: 36px;
            text-align: center;
            line-height: 110px;
            background-color: #fff;
        }
        
/* g-body-5  瀑布动画*/
    /* 底部容器 */
        .g-body-5 {
            display: flex;
            margin: 0 auto;
            justify-content: center;
            align-items: center;
            width: 86%;
            height: 60px;
        }
        


        /* 动画图框 */
        div.slide5 {
            width: 100%;
            height: 64px;
            overflow: hidden;
        }

        /* 最底层实际容器大小 */
        ul.list5 {
            position: relative;
            width: 9500px;
            height: 64px;
            animation: fivemove 80s linear 0s infinite;
       /* 名称 持续时间 速率 延迟播放时间 播放次数 (播放方向（normal向前播放；alternate偶次数向前，奇次数向反方向播放）) */
        }

        /* 动画效果显示 */
        @keyframes fivemove {
            0% {
                transform: translate(0);
            }
            100% {
                transform: translate(-3074px);
            }

        }

         /* 图片 */
        .show5 {
            float: left;
            margin: 2px 30px;
            width: 100px;
            height: 60px;
        }

        /* 鼠标悬停效果：静止 */
        .list5:hover {
            animation-play-state: paused;
        }


/* g-body-6 */
    /* 底部容器 */
        .g-body-6 {
            display: flex;
            margin:0 auto;
            width: 80%;
            height: auto;
            background-color: #fff;
        }

    /* 左侧文本 */
        /* 底部 */
        .text6 {
            flex: 1;
            margin: 100px 10px;
            background-color: #fff;
        }

        /* 左侧按钮 */
        .button6 {
            margin-top: 16px;
            padding: 6px;
            width: 14%;
            height: auto;
            font-weight: 600;
            border: 1px solid #929191;
            border-radius: 10px;
            background-color: #fff;
        }
        .button6:hover {
            background-color: #f5f5f5;
            cursor: pointer;
        }

        /* 左侧链接文本 */
        .text6 a {
            color: #540aaf;
            text-decoration: underline;
        }

    /* 右侧图片 */
        .image6 {
            flex: 1;
            background-color: #fff;
        }

        /* 图片大小 */
        .image6 img {
            margin-top: 40px;
            width: 100%;
            height: 90%;
            border-radius: 10px;
        }


/* g-body-7 */
    /* 底部容器 */
        .g-body-7 {
            display: flex;
            flex-direction: row-reverse;
            margin:0 auto;
            width: 80%;
            height: auto;
            background-color: #fff;
        }

    /* 右侧文本 */
        /* 底部 */
        .text7 {
            flex: 1;
            margin: 100px 40px;
            background-color: #fff;
        }

        /* 右侧按钮 */
        .button7 {
            margin-top: 16px;
            padding: 6px;
            width: 15%;
            height: auto;
            font-weight: 600;
            border: 1px solid #929191;
            border-radius: 10px;
            background-color: #fff;
        }
        .button7:hover {
            background-color: #f5f5f5;
            cursor: pointer;
        }

        /* 右侧链接文本 */
        .text7 a {
            color: #540aaf;
            text-decoration: underline;
        }

    /* 左侧图片 */
        .image7 {
            flex: 1;
            background-color: #fff;
        }

        /* 图片大小 */
        .image7 img {
            margin-top: 40px;
            width: 100%;
            height: 90%;
            border-radius: 10px;
        }


/* g-body-8 */
    /*底部容器 */
        .g-body-8 {
            display: flex;
            margin: 40px auto;
            padding-left: 20px;
            padding-bottom: 20px;
            width: 96%;
            height: auto;
            background-color: #e0e0e06f;
        }
        
       .g-body-8 ul {
        flex: 1;
        display: block;
        margin-top: 20px;
        height: auto;
        color: #000000;
        font-size: 14px;
        line-height: 30px;
       }
       
       /* 文字颜色 */
       .g-body-8 a {
        color: #000;
       }

/* g-title-9 */
       .g-title-9 {
        margin: 40px auto;
        width: 80%;
        height: auto;
        text-align: center;
        line-height: 50px;
        background-color: #fff;
       }

/* g-body-9 */
    /* 瀑布流底部容器 */
       .g-body-9 {
        display: flex;
        margin: 0 auto;
        width: 76%;
        height: auto;
        background-color: #fff;
       }

       /* 图片所占容器 */
       .g-body-9 div {
        flex: 1;
       }

       /* 图片样式 */
        .g-body-9 img {
            display: block;
            margin: 14px auto;
            width:90%;
            border-radius: 10px;
       } 

/* g-body-10 */
        /* 调节文字边框和大小 */
       .g-body-10 {
        margin: 40px auto;
        width: 10%;
        height: auto;
        font-weight: 650;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
        border: 1px solid #e4e4e4;
        border-radius: 10px;
        background-color: #fff;
    }
    
        /* 调节文字颜色 */
        .g-body-10 div {
           color: #000;
        }

        /* 调节鼠标悬停效果 */
        .g-body-10:hover {
            background-color: #e6e6e68e;
        }
    
/* g-title-11 */
        .g-title-11 {
            margin: 40px auto;
            width: 80%;
            height: auto;
            text-align: center;
            line-height: 50px;
            background-color: #fff;
        }

/* g-body-11 */
    /* 底部容器 */
    .g-body-11 {
            display: flex;
            flex-direction: row-reverse;
            margin:0 auto;
            width: 80%;
            height: auto;
            background-color: #fff;
        }

    /* 右侧文本 */
        /* 底部 */
        .text11 {
            flex: 4;
            margin: 100px 40px;
            background-color: #fff;
        }

        /* 右侧按钮 */
        .button11 {
            margin-top: 16px;
            padding: 8px;
            width: auto;
            height: auto;
            color: #fff;
            font-weight: 600;
            border-radius: 10px;
            border: 1px solid #7d25e9;
            background-color: #7d25e9;
        }
        .button11:hover {
            background-color: #661dbf;
            cursor: pointer;
        }


    /* 左侧图片 */
        .image11 {
            flex: 5;
            background-color: #fff;
        }

        /* 图片大小 */
        .image11 img {
            margin-top: 40px;
            width: 100%;
            height: 90%;
            border-radius: 10px;
        }

/* g-body-12 */
        .g-body-12 {
            margin: 80px auto;
            padding-top: 80px;
            width: 100%;
            height: auto;
            color: #fff;
            font-size: 46px;
            font-weight: 800;
            line-height: 65px;
            text-align: center;
            background-color: #000;
        }
        
        /* 紫色字体 */
        .g-body-12 span {
            color: #661dbf;
            font-size: 46px;
            font-weight: 800;
            background-color: #000;
        }

        /* 按钮样式 */
        .button12 {
            margin-bottom: 100px;
            padding: 10px 16px;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            border: 1px solid #7d25e9;
            border-radius: 6px;
            background-color: #8736ea;
        } 

        /* 鼠标悬停按钮样式 */
        .button12:hover {
            background-color: #762ecd;
        }

/* g-body-13 */
    /*底部容器 */
    .g-body-13 {
            display: flex;
            margin: 36px auto;
            padding-left: 20px;
            padding-bottom: 20px;
            width: 96%;
            height: auto;
            border-bottom: 1px solid #92919163;
            background-color: #fff;
        }
        
       .g-body-13 ul {
        flex: 1;
        display: block;
        margin-top: 20px;
        height: auto;
        color: #000;
        font-size: 14px;
        line-height: 30px;
       }

       /* 小标题样式 */
       .g-body-13 strong {
        font-size: 18px;
       }

       /* 文字颜色 */
       .g-body-13 a {
        color: #000;
       }

       /* 鼠标悬停文字效果 */
       .g-body-13 a:hover {
        color: #762ecd;
       }

/* g-body-14 */
       .g-body-14 {
        margin: 0 auto;
        width: 60%;
        height: auto;
        text-align: center;
        color: #929191;
        background-color: #fff;
       }

/* g-tail */
    /* 底部容器 */
       .g-tail {
        display: flex;
        margin: 20px auto;
        width: 96%;
        height: auto;
        background-color: #fff;
       }

/* 下拉菜单 */
       /* 文字样式选择框容器 */
       .tail-select {
        flex: 2;
        padding-left: 10px;
        padding-top: 10px;
        background-color: #fff;
       }

       /* 下拉菜单样式 */
       .tail-select select {
        padding: 10px 20px;
        border-radius: 8px;
        border: 1px solid #bbbbbb98;
       }

       /* 下拉菜单鼠标悬停效果 */
       .tail-select select:hover {
        border: 1px solid #000;
        
    }
    
/* 尾部容器分配 */
    .tail-box-1 {
        flex: 2;
        background-color: #fff;
    }

    .tail-box-2 {
        flex: 1;
        background-color: #fff;
    }

    .tail-box-3 {
        flex: 2;
        background-color: #fff;
    }

    .tail-box-4 {
        flex: 3;
        background-color: #fff;
    }

    .tail-box-5 {
        flex: 4;
        background-color: #fff;
    }
    
    /* 统一文字样式 */
    .tail-box-1 div,
    .tail-box-2 div,
    .tail-box-3 div,
    .tail-box-4 div,
    .tail-box-5 div {
        color: #000;
        font-size: 14px;
        text-align: center;
        border-right: 1px solid #000;
    }

    /* 统一文字鼠标悬停效果 */
    .tail-box-1 div:hover,
    .tail-box-2 div:hover,
    .tail-box-3 div:hover,
    .tail-box-4 div:hover,
    .tail-box-5 div:hover {
        color: #762ecd;
    }

    .tail-image {
        flex: 3;
        text-align: center; 
        background-color: #fff;
    }


/* 媒体查询 */
    /* 导航栏 */
        .u-tool-both {
            display: none;
            width: 100%; 
            height: 50px;
            border-radius: 8px;
            background-color: #fff;
        }

        /* 鼠标悬停 */
        .u-tool-both:hover {
            background-color: #f5f5f5;
        }

         /* 下拉列表显示 */
         .nav-bar-list-both {
            z-index: 99;
            display: none;
            position: absolute;
            transform: translate(-54%);
            width: 100px;
            height: auto;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 1px 10px #b1b0b0;
        }

        /* 鼠标悬停 */
        .u-tool-both:hover>.nav-bar-list-both {
            display: block;
        }

        .nav-bar-list-both li:hover {
            background-color: #f5f5f5;
            border-radius: 8px;
        }

        /* 下拉列表内字体 */
        .nav-bar-list-both {
            font-size: 10px;
        }

        @media (max-width:1004px) {
            .u-tool-1,
            .u-tool-2 {
                display: none;
            }

            .u-tool-3,
            .u-tool-4 {
                width: 80px;
            }

            .u-tool-both {
                display: block;
                font-size: 30px;
            }
        }

    /* g-body-3 */
        @media (max-width:970px) {
            .container {
                flex-direction: column;
                max-width: 350px;
            }
        }

    /* g-body-4 */
        @media (max-width:738px) {
            .l1 strong, 
            .l2 strong, 
            .l3 strong {
               font-size: 80%;
               line-height: 80%;
            }

            .l1 p, 
            .l2 p, 
            .l3 p {
               font-size: 50%;
            }
        }

    /* .g-body-6 */
        @media (max-width:760px) {
            .image6 {
                margin-top: 80px;
                height: 300px;
            }
        }

    /* .g-body-7,.g-body-11 */
        @media (max-width:780px) {
            .image7,
            .image11 {
                margin-top: 100px;
                height: 300px;
            }
        }
        
    /* g-tail */
        @media (max-width:820px) {
            .g-tail {
                flex-direction: column;
            }
        }

/* 新功能（一键回到顶部） */
        /* 父容器 */
        .u-back-top {
            position: fixed;
            z-index: 99;
            right: 4%;
            bottom: 8%;
            width: 3%;
            height: auto;
            text-align: center;
            border-radius: 8px;
            background-color: #7d25e9;
        }
        
        /* 文字样式 */
        .u-back-top a {
            padding: 10px 0;
            color: #fff;
            font-size: 1vw;
            line-height: 50px;
        }

        /* 鼠标悬停效果 */
        .u-back-top:hover {
            background-color: #661dbf;
            transform: scale(1.05);
            cursor: pointer;
        }



    </style>

</head>

<body>

    <!-- 头部导航栏 -->
    <div class="g-header">
        <span class="Logo"><a href="#"><img src="https://static.canva.cn/web/images/f9657e6b25961d7a7d94cb78c0192507.svg" alt=""></a></span>
        <span class="u-tool-1">
            <a href="#">模板素材</a>
            <div class="nav-bar-list1">

                <ul>
                    <li>
                        <p><strong>市场营销</strong></p>
                        <p class="text"><a href="#">海报</a></p>
                        <p class="text"><a href="#">Logo</a></p>
                        <p class="text"><a href="#">长图</a></p>
                        <p class="text"><a href="#">banner</a></p>
                        <p class="text"><a href="#">易拉宝</a></p>
                        <p class="text"><a href="#">传单</a></p>
                        <p class="text"><a href="#">三折页</a></p>
                        <p class="text"><a href="#">会员卡</a></p>
                        <p class="text"><a href="#">公告</a></p>
                    </li>
                    <li>
                        <p><strong>社交媒体</strong></p>
                        <p class="text"><a href="#">小红书</a></p>
                        <p class="text"><a href="#">Vlog</a></p>
                        <p class="text"><a href="#">微信朋友圈</a></p>
                        <p class="text"><a href="#">公众号</a></p>
                        <p class="text"><a href="#">二维码</a></p>
                        <p class="text"><a href="#">抖音背景图</a></p>
                        <p class="text"><a href="#">头像</a></p>
                        <p class="text"><a href="#">微博</a></p>
                        <p class="text"><a href="#">日签</a></p>
                    </li>
                    <li>
                        <p><strong>商务办公</strong></p>
                        <p class="text"><a href="#">PPT</a></p>
                        <p class="text"><a href="#">在线文档</a></p>
                        <p class="text"><a href="#">白板</a></p>
                        <p class="text"><a href="#">图表</a></p>
                        <p class="text"><a href="#">名片</a></p>
                        <p class="text"><a href="#">简报</a></p>
                        <p class="text"><a href="#">报告</a></p>
                        <p class="text"><a href="#">工作表</a></p>
                        <p class="text"><a href="#">工作证</a></p>
                    </li>
                    <li>
                        <p><strong>教育培训</strong></p>
                        <p class="text"><a href="#">简历</a></p>
                        <p class="text"><a href="#">手抄报</a></p>
                        <p class="text"><a href="#">课程表</a></p>
                        <p class="text"><a href="#">计划表</a></p>
                        <p class="text"><a href="#">成绩表</a></p>
                        <p class="text"><a href="#">证书</a></p>
                        <p class="text"><a href="#">奖状</a></p>
                        <p class="text"><a href="#">视频</a></p>
                        <p class="text"><a href="#">书籍封面</a></p>
                    </li>
                    <li>
                        <p><strong>日常生活</strong></p>
                        <p class="text"><a href="#">贺卡</a></p>
                        <p class="text"><a href="#">邀请函</a></p>
                        <p class="text"><a href="#">手机壁纸</a></p>
                        <p class="text"><a href="#">日历</a></p>
                        <p class="text"><a href="#">表情包</a></p>
                        <p class="text"><a href="#">手账</a></p>
                        <p class="text"><a href="#">红包封面</a></p>
                        <p class="text"><a href="#">食谱</a></p>
                        <p class="text"><a href="#">优惠券</a></p>
                    </li>
                    <div class="container1">
                        <div class="item">
                            <a href="#"><img class="icon" src="../图片素材/1.1.png" alt="模板"></a>
                            <div class="content">
                                <div class="title"><a href="#">模板中心 ></a></div>
                                <div class="desc"><a href="#">10万+设计模板，覆盖各种设计场景</a></div>
                            </div>

                        </div>
                        <div class="item">
                            <a href="#"><img class="icon" src="../图片素材/1.2.webp" alt="模板"></a>
                            <div class="content">
                                <div class="title"><a href="#">设计素材 ></a></div>
                                <div class="desc"><a href="#">数百万高质量版权素材及原创插画，装点你的精美设计</a></div>
                            </div>

                        </div>
                        <div class="item">
                            <a href="#"><img class="icon" src="../图片素材/1.3.webp" alt="模板"></a>
                            <div class="content">
                                <div class="title"><a href="#">版权图库 ></a></div>
                                <div class="desc"><a href="#">数千万张高清图片，创作你的精美设计</a></div>
                            </div>

                        </div>
                        <div class="item">
                            <a href="#"><img class="icon" src="../图片素材/1.4.webp" alt="模板"></a>
                            <div class="content">
                                <div class="title"><a href="#">字体库 ></a></div>
                                <div class="desc"><a href="#">摆脱版权桎梏，轻松、高效的完成创意设计需求</a></div>
                            </div>

                        </div>
                    </div>
                </ul>

            </div>
        </span>


        <span class="u-tool-1"><a href="#">设计场景</a>
            <div class="nav-bar-list2">

                <ul>
                    <li>
                        <p class="underline"><a href="#"><strong>在线设计 ></strong></a></p>
                        <p class="text"><a href="#">海报设计</a></p>
                        <p class="text"><a href="#">Logo设计</a></p>
                        <p class="text"><a href="#">简历制作</a></p>
                        <p class="text"><a href="#">PPT制作</a></p>
                        <p class="text"><a href="#">视频制作</a></p>
                        <p class="text"><a href="#">手抄报设计</a></p>
                        <p class="text"><a href="#">网站设计</a></p>
                        <p class="text"><a href="#">头像设计</a></p>
                        <p class="text"><a href="#"><strong>查看全部 ></strong></a></p>
                    </li>
                    <li>
                        <p><strong>印刷物料</strong></p>
                        <p class="text"><a href="#">展板</a></p>
                        <p class="text"><a href="#">KT版</a></p>
                        <p class="text"><a href="#">门头</a></p>
                        <p class="text"><a href="#">价目表</a></p>
                        <p class="text"><a href="#">菜单</a></p>
                        <p class="text"><a href="#">贴纸</a></p>
                        <p class="text"><a href="#">门票</a></p>
                        <p class="text"><a href="#">书签</a></p>
                    </li>
                    <li>
                        <p class="underline"><a href="#"><strong>节日热点 ></strong></a></p>
                        <p class="text"><a href="#">中国国医节</a></p>
                        <p class="text"><a href="#">春分</a></p>
                        <p class="text"><a href="#">国际幸福日</a></p>
                        <p class="text"><a href="#">世界睡眠日</a></p>
                        <p class="text"><a href="#">世界儿歌日</a></p>
                        <p class="text"><a href="#">国际森林日</a></p>
                        <p class="text"><a href="#">世界戏剧日</a></p>
                        <p class="text"><a href="#">世界双相情感障碍日</a></p>
                    </li>
                    <div class="container2">
                        <div class="item">
                            <a href="#"><img class="icon" src="../图片素材/2.1.webp" alt=""></a>
                            <div class="content">
                                <div class="title"><a href="#">视觉办公套件 ></a></div>
                                <div class="desc"><a href="#">重新构想你的工作方式，满足你视觉传达的所有需求</a></div>
                            </div>

                        </div>
                        <div class="item">
                            <a href="#"><img class="icon" src="../图片素材/2.2.webp" alt=""></a>
                            <div class="content">
                                <div class="title"><a href="#">行业解决方案 ></a></div>
                                <div class="desc"><a href="#">为中小企业提供集设计、管理、协作于一体的以展示设计解决方案</a></div>
                            </div>

                        </div>

                    </div>
                </ul>
            </div>
        </span>

        <span class="u-tool-1"><a href="#">资源教程</a>
            <div class="nav-bar-list3">

                <ul>
                    <li>
                        <p class="underline"><a href="#"><strong>热门功能 ></strong></a></p>
                        <p class="text"><a href="#">在线抠图</a></p>
                        <p class="text"><a href="#">在线拼图</a></p>
                        <p class="text"><a href="#">图片编辑</a></p>
                        <p class="text"><a href="#">视频剪辑</a></p>
                        <p class="text"><a href="#">在线画图</a></p>
                        <p class="text"><a href="#">图片格式转换</a></p>
                        <p class="text"><a href="#">网站制作</a></p>
                        <p class="text"><a href="#">在线翻译</a></p>
                    </li>
                    <li>
                        <p><strong>设计资源</strong></p>
                        <p class="text"><a href="#">二维码生成器</a></p>
                        <p class="text"><a href="#">证件照制作</a></p>
                        <p class="text"><a href="#">公众号助手</a></p>
                        <p class="text"><a href="#">PDF编辑器</a></p>
                        <p class="text"><a href="#">免费图库</a></p>
                        <p class="text"><a href="#">插图</a></p>
                        <p class="text"><a href="#">颜色搭配</a></p>
                    </li>
                    <li>
                        <p class="underline"><a href="#"><strong>行业资源 ></strong></a></p>
                        <p class="text"><a href="#">餐饮</a></p>
                        <p class="text"><a href="#">教育</a></p>
                        <p class="text"><a href="#">婚庆</a></p>
                        <p class="text"><a href="#">电商</a></p>
                        <p class="text"><a href="#">新媒体</a></p>
                        <p class="text"><a href="#">人力资源</a></p>
                        <p class="text"><a href="#">政府政务</a></p>
                        <p class="text"><a href="#">跨境电商</a></p>
                    </li>
                    <div class="container3">
                        <div class="item">
                            <a href="#"><img class="icon" src="../图片素材/3.1.webp" alt=""></a>
                            <div class="content">
                                <div class="title"><a href="#">使用教程 ></a></div>
                                <div class="desc"><a href="#">详尽的功能教学与设计技巧，为你在Canva可画的设计之旅保驾护航</a></div>
                            </div>

                        </div>
                        <div class="item">
                            <a href="#"><img class="icon" src="../图片素材/3.2.webp" alt=""></a>
                            <div class="content">
                                <div class="title"><a href="#">设计学院 ></a></div>
                                <div class="desc"><a href="#">看点好玩的设计资讯，也学点实用的设计技巧</a></div>
                            </div>

                        </div>
                        <div class="item">
                            <a href="#"><img class="icon" src="../图片素材/3.3.webp" alt=""></a>
                            <div class="content">
                                <div class="title"><a href="#">创作者计划 ></a></div>
                                <div class="desc"><a href="#">成为Canva可画创作者，创作任何你擅长的内容，获取源源不断的收入</a></div>
                            </div>

                        </div>
                    </div>
                </ul>
            </div>
        </span>

        <span class="u-tool-1"><a href="#">可画AI</a>
            <div class="nav-bar-list4">

                <ul>
                    <li>
                        <p><strong>图片处理</strong></p>
                        <p class="text"><a href="#">AI生成图片</a></p>
                        <p class="text"><a href="#">AI消除</a></p>
                        <p class="text"><a href="#">AI抠图</a></p>
                        <p class="text"><a href="#">AI修图</a></p>
                        <p class="text"><a href="#">AI扩图</a></p>
                    </li>
                    <li>
                        <p><strong>内容生成</strong></p>
                        <p class="text"><a href="#">AI写作</a></p>
                        <p class="text"><a href="#">AI生成文章</a></p>
                        <p class="text"><a href="#">AI写小说</a></p>
                        <p class="text"><a href="#">AI角色</a></p>
                        <p class="text"><a href="#">AI漫画</a></p>
                        <p class="text"><a href="#">AI绘画</a></p>
                        <p class="text"><a href="#">标语生成器</a></p>
                    </li>
                    <li>
                        <p><strong>智能工具</strong></p>
                        <p class="text"><a href="#">AI PPT</a></p>
                        <p class="text"><a href="#">AI简历</a></p>
                        <p class="text"><a href="#">PPT动画</a></p>
                        <p class="text"><a href="#">AI翻译</a></p>
                        <p class="text"><a href="#">AI取名</a></p>
                    </li>
                    <div class="container4">
                        <a href="#"><img class="icon4" src="../图片素材/4.png" alt="" ></a>
                        <div class="content">
                            <div class="title"><a href="#">可画AI ></a></div>
                            <div class="desc"><a href="#">让提质增效的所有AI生产力工具,尽在一处</a></div>
                        </div>
                    </div>
                </ul>
            </div>
        </span>

        <span class="u-tool-1"><a href="#">订阅方案</a>
            <div class="nav-bar-list5">

                <ul>
                    <li>
                        <div class="list5-left-top"><a href="#"><img src="../图片素材/5.1.webp" alt="" class="list5-left-image"></a></div>
                        <a href="#" class="underline"><strong>免费版 ></strong></a>
                        <p>适合每个人，独立或与他人一起完成设计。</p>
                    </li>
                    <li>
                        <div class="list5-left-top"><a href="#"><img src="../图片素材/5.2.png" alt="" class="list5-left-image"></a></div>
                        <a href="#" class="underline"><strong>高级版 ></strong></a>
                        <p>适合个人创作者、个人商家和自由设计师，可以无限量使用全部高级版的内容，轻松高效创作专业水准的设计。</p>
                    </li>
                    <li>
                        <div class="list5-left-top"><a href="#"><img src="../图片素材/5.3.webp" alt="" class="list5-left-image"></a></div>
                        <a href="#" class="underline"><strong>团队版 ></strong></a>
                        <p>适合任何规模的团队，通过一站式视觉传播解决方案，轻松输出符合品牌调性的视觉内容。</p>
                    </li>
                    <li>
                        <div class="list5-left-top"><a href="#"><img src="../图片素材/5.4.webp" alt="" class="list5-left-image"></a></div>
                        <a href="#" class="underline"><strong>企业服务 ></strong></a>
                        <p>适合所有企业客户，提供优质完善的客户成功和定制设计服务。</p>
                    </li>
                    <div class="container5">
                        <div class="item">
                            <a href="#"><img class="icon" src="../图片素材/5.51.webp" alt=""></a>
                            <div class="content">
                                <div class="title"><a href="#">跨境电商 ></a></div>
                                <div class="desc"><a href="#">一站式创作和协作体验，轻松输出和管理跨境电商行业的视觉内容</a></div>
                            </div>

                        </div>
                        <div class="item">
                            <a href="#"><img class="icon" src="../图片素材/5.52.webp" alt=""></a>
                            <div class="content">
                                <div class="title"><a href="#">公益会员 ></a></div>
                                <div class="desc"><a href="#">面向在华非营利组织,提供0成本、简单、高效的以展示设计解决方案</a></div>
                            </div>

                        </div>
                        <div class="item">
                            <a href="#"><img class="icon" src="../图片素材/5.53.webp" alt=""></a>
                            <div class="content">
                                <div class="title"><a href="#">教育版 ></a></div>
                                <div class="desc"><a href="#">专为教学场景打造的，在线教学可视化素材平台与课室创意协作工具</a></div>
                            </div>

                        </div>
                    </div>
                </ul>
            </div>
        </span>

        <span class="u-tool-1"><a href="#">客户端</a></span>
        <p class="blank"></p>
        <span class="u-tool-2"><a href="#">搜索</a></span>
        <span class="u-tool-2"><a href="#">帮助中心</a></span>
        <button class="u-tool-3"><strong>登录</strong></button>
        <button class="u-tool-4"><strong>注册</strong></button>

        <!-- 媒体查询 -->
         <span class="u-tool-both">...
                <div class="nav-bar-list-both">
                    <ul>
                        <li><a href="#">模板素材</a></li>
                        <li><a href="#">设计场景</a></li>
                        <li><a href="#">资源教程</a></li>
                        <li><a href="#">可画AI</a></li>
                        <li><a href="#">订阅方案</a></li>
                        <li><a href="#">客户端</a></li>
                        <li><a href="#">搜索</a></li>
                        <li><a href="#">帮助中心</a></li>
                    </ul>
                </div>
         </span>

    </div>

    <!-- 空白内容，用于填补头部导航栏下层空出区域,并设置书签地址让新工具实现回到顶部的功能 -->
    <div class="Blank"><a name="top"></a></div>

<!-- 正文内容的总容器 -->
<div class="maxbox">

    <!-- g-body -->
    <div class="g-body-1">
        <div class="part1">今天你想<span>设计</span>什么？</div>
        <div class="part2">使用Canva可画,轻松创建并分享专业设计。</div>
        <div class="part3"><button><strong>开始设计</strong></button></div>
    </div>

    <div class="g-body-2">
        <div class="slide">
            <ul class="list">
                <li><a href="#"><img src="../图片素材/body2.1.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.2.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.3.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.4.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.5.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.6.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.7.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.8.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.9.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.10.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.11.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.12.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.1.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.2.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.3.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.4.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.5.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.6.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.7.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.8.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.9.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.10.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.11.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.12.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.1.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.2.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.3.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.4.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.5.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.6.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.7.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.8.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.9.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.10.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.11.jpeg" alt="" class="show"></a></li>
                <li><a href="#"><img src="../图片素材/body2.12.jpeg" alt="" class="show"></a></li>
            </ul>
        </div>
    </div>

    <div class="g-body-3">
        <div class="title3">完美适配每位用户</div>
        <div class="container">
            <div class="block3-1"><b>适用于个人</b>
                                  <strong>Canva可画免费版</strong>
                                  <p>适用于设计或编辑任意内容。</p><br>
                                  <button>免费使用</button></div>
            <div class="block3-2"><b>适用于个人</b>
                                  <strong>Canva可画高级版</strong>
                                  <p>使用付费功能实现品牌成长或开展兴趣项目。</p>
                                  <button>首月半价开通</button></div>
            <div class="block3-3"><b>适用于团队</b>
                                  <strong>Canva可画团队版</strong>
                                  <p>适用于想要用付费职场工具和工作流程来开展协作的团队。</p>
                                  <button>预约演示</button></div>
        </div>
        <div class="text3"><p>我们的<a href="#">定价页面</a>展示了所有详细信息。<a href="#">教育组织</a>和<a href="#">非营利机构</a>可以免费享用Canva可画的付费功能。</p></div>

    </div>

    <div class="g-body-4">
        <div class="title4">Canva可画使用方式</div>
            <div class="main">
                <!-- 先做三个选项卡 ，一个选项由一个input和一个label组成 -->
                <input type="radio" id="b1" name="button4" checked>
                <input type="radio" id="b2" name="button4">
                <input type="radio" id="b3" name="button4">
                <!-- 对应选项框里的内容编辑 -->
                <label for="b1" class="l1"><strong>开始设计任意内容</strong>
                                        <p>使用自己的媒体文件或现成的模板开始设计，或将脑海中想象的设计实现出来。</p></label>
                <label for="b2" class="l2"><strong>拖放和编辑</strong>
                                        <p>在编辑器中搜索并查找任意内容：素材、音频和应用，应有尽有！还能一站式拖放和自定义编辑内容。</p></label>
                <label for="b3" class="l3"><strong>写作与分享</strong>
                                        <p>邀请成员查看、编辑或下载设计，或者直接将其发布到社交媒体。</p></label>

                <!-- 内容块 -->
                <div class="tab">
                    <div class="tab_s"><img src="../图片素材/body4.1.webp" alt=""></div>
                    <div class="tab_s"><img src="../图片素材/body4.2.webp" alt=""></div>
                    <div class="tab_s"><img src="../图片素材/body4.3.webp" alt=""></div>
                </div>
            </div>
    </div>
    
    <div class="g-title-5">赢得众多知名公司的信任</div>

    <div class="g-body-5">
        <div class="slide5">
            <ul class="list5">
                <li><a href="#"><img src="../图片素材/body5.1.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.2.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.3.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.4.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.5.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.6.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.7.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.8.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.9.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.10.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.1.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.2.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.3.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.4.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.5.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.6.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.7.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.8.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.9.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.10.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.1.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.2.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.3.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.4.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.5.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.6.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.7.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.8.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.9.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.10.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.1.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.2.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.3.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.4.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.5.webp" alt="" class="show5"></a></li>
                <li><a href="#"><img src="../图片素材/body5.6.webp" alt="" class="show5"></a></li>
            </ul>
        </div>
    </div>

    <div class="g-body-6">
        <div class="text6"><h1>使用AI进行创作</h1><br>
                           <p>使用魔力工作室系列AI功能,重新定义你的创作方式。试试用<a href="#">AI写作</a>生成各类职场、自媒体文案，用<a href="#">AI修图功能</a>美化编辑你的照片或用AI生图随心创作图片。</p>
                           <button class="button6">开始体验</button></div>
        <div class="image6"><img src="../图片素材/body6.png" alt=""></div>
    </div>

    <div class="g-body-7">
        <div class="text7"><h1>多人协作在线编辑</h1><br>
                           <p>一键分享链接，或在线评论@团队成员即时交流反馈。邀请同学、同事协作完成小组作业、团队汇报<a href="#">演示文稿</a>、 <a href="#">文档</a>、 <a href="#">白板脑暴</a>，还可以和家人朋友一起撰写生日贺卡、编辑电子相册等。</p>
                           <button class="button7">开始体验</button></div>
        <div class="image7"><img src="../图片素材/body7.png" alt=""></div>
    </div>

    <div class="g-body-8">
        <ul>
            <li><a href="#"><strong>热门类型</strong></a></li>
            <li><a href="#"><strong>协同办公</strong></a></li>
            <li><a href="#"><strong>热门功能</strong></a></li>
        </ul>
        <ul>
            <li><a href="#">海报</a></li>
            <li><a href="#">文档</a></li>
            <li><a href="#">AI修图</a></li>
        </ul>
        <ul>
            <li><a href="#">简历</a></li>
            <li><a href="#">图表</a></li>
            <li><a href="#">AI抠图</a></li>
        </ul>
        <ul>
            <li><a href="#">PPT</a></li>
            <li><a href="#">白板</a></li>
            <li><a href="#">AI写作</a></li>
        </ul>
        <ul>
            <li><a href="#">名片</a></li>
            <li><a href="#">画图</a></li>
            <li><a href="#">AI图片生成</a></li>
        </ul>
        <ul>
            <li><a href="#">Logo</a></li>
            <li><a href="#">网站制作</a></li>
            <li><a href="#">AI扩图</a></li>
        </ul>
        <ul>
            <li><a href="#">Banner</a></li>
            <li><a href="#">PDF编辑器</a></li>
            <li><a href="#">在线拼图</a></li>
        </ul>
        <ul>
            <li><a href="#">手抄报</a></li>
            <li><a href="#">简报</a></li>
            <li><a href="#">视频剪辑</a></li>
        </ul>
        <ul>
            <li><a href="#">长图</a></li>
            <li><a href="#">证书</a></li>
            <li><a href="#">在线翻译</a></li>
        </ul>
        <ul>
            <li><a href="#">贺卡</a></li>
            <li><a href="#">计划表</a></li>
            <li><a href="#">二维码生成器</a></li>
        </ul>
        <ul>
            <li><a href="#">邀请函</a></li>
            <li><a href="#">工作证</a></li>
            <li><a href="#">公众号助手</a></li>
        </ul>
        <ul>
            <li><a href="#">书籍封面</a></li>
            <li><a href="#">易拉宝</a></li>
            <li><a href="#">证件照</a></li>
        </ul>
        
    </div>

    <div class="g-title-9"><h1>各种模板类型，应有尽有</h1>
                        <p>你可以自定义商务办公文档，也可以设计一些更私人的内容，例如邀请函。</p></div>

    <div class="g-body-9">
        <div class="column1">
            <a href="#"><img src="../图片素材/body9.1.jpeg" alt=""></a>
            <a href="#"><img src="../图片素材/body9.2.jpeg" alt=""></a>
        </div>
        <div class="column2">
            <a href="#"><img src="../图片素材/body9.3.jpeg" alt=""></a>
            <a href="#"><img src="../图片素材/body9.4.jpeg" alt=""></a>
            <a href="#"><img src="../图片素材/body9.5.jpeg" alt=""></a>
        </div>
        <div class="column3">
            <a href="#"><img src="../图片素材/body9.6.jpeg" alt=""></a>
            <a href="#"><img src="../图片素材/body9.7.jpeg" alt=""></a>
            <a href="#"><img src="../图片素材/body9.8.jpeg" alt=""></a>
        </div>
        <div class="column4">
            <a href="#"><img src="../图片素材/body9.9.jpeg" alt=""></a>
            <a href="#"><img src="../图片素材/body9.10.jpeg" alt=""></a>
        </div>
        <div class="column5">
            <a href="#"><img src="../图片素材/body9.11.jpeg" alt=""></a>
            <a href="#"><img src="../图片素材/body9.12.jpeg" alt=""></a>
        </div>
        <div class="column6">
            <a href="#"><img src="../图片素材/body9.13.jpeg" alt=""></a>
            <a href="#"><img src="../图片素材/body9.14.jpeg" alt=""></a>
        </div>
    </div>
        
    <div class="g-body-10">
        <a href="#"><div>浏览所有模板</div></a>
    </div>

    <div class="g-title-11"><h1>为你的事业带来助力的订阅方案</h1>
        <p>使用Canva可画团队版,赋能每个人共同设计</p>
    </div>

    <div class="g-body-11">
        <div class="text11"><h1>AI效率</h1>
                           <p>利用AI创建符合品牌风格的文案、模板和视频编辑。</p><br>
                            <h1>保持公司品牌风格统一</h1>
                           <p>设置品牌工具箱和模板，供团队设计使用。</p><br>
                           <h1>完美的审批流程</h1>
                           <p>轻松管理个人权限、分配任务和分享你的作品。</p><br>
                           <button class="button11">探索Canva可画团队版</button></div>
        <div class="image11"><img src="../图片素材/body11.webp" alt=""></div>
    </div>

    <div class="g-body-12">
        <div>使用Canva可画<span>开始设计</span></div>
        <button class="button12">开始免费使用</button>
    </div>

    <div class="g-body-13">
        <ul>
            <li><strong>浏览</strong></li>
            <li><a href="#">在线设计</a></li>
            <li><a href="#">免费设计</a></li>
            <li><a href="#">模板中心</a></li>
            <li><a href="#">版权图库</a></li>
            <li><a href="#">设计素材</a></li>
            <li><a href="#">图标制作</a></li>
        </ul>
        <ul>
            <li><strong>功能</strong></li>
            <li><a href="#">思维导图</a></li>
            <li><a href="#">视频库</a></li>
            <li><a href="#">视频格式转换</a></li>
            <li><a href="#">照片换底色</a></li>
            <li><a href="#">图片转PDF</a></li>
            <li><a href="#">视频转GIF</a></li>
            <li><a href="#">Word转PDF</a></li>
            <li><a href="#">PDF转PPT</a></li>
            <li><a href="#">PDF转JPG</a></li>
            <li><a href="#">JPG转PDF</a></li>
        </ul>
        <ul>
            <li><strong>灵感</strong></li>
            <li><a href="#">设计学院</a></li>
            <li><a href="#">创意设计</a></li>
            <li><a href="#">常用设计尺寸</a></li>
            <li><a href="#">取色器</a></li>
            <li><a href="#">配色方案</a></li>
            <li><a href="#">色环</a></li>
            <li><a href="#">营销日历</a></li>
        </ul>
        <ul>
            <li><strong>热门模板</strong></li>
            <li><a href="#">简历模板</a></li>
            <li><a href="#">PPT模板</a></li>
            <li><a href="#">手抄版模板</a></li>
            <li><a href="#">邀请函模板</a></li>
            <li><a href="#">课程表模板</a></li>
            <li><a href="#">奖状模板</a></li>
            <li><a href="#">海报模板</a></li>
            <li><a href="#">名片模板</a></li>
            <li><a href="#">网站模板</a></li>
            <li><a href="#">计划表模板</a></li>
        </ul>
        <ul>
            <li><strong>产品</strong></li>
            <li><a href="#">下载Canva可画APP</a></li>
            <li><a href="#">Canva可画免费版</a></li>
            <li><a href="#">Canva可画高级版</a></li>
            <li><a href="#">Canva可画团队版</a></li>
            <li><a href="#">Canva可画公益会员</a></li>
            <li><a href="#">Canva可画教育版</a></li>
            <li><a href="#">Canva可画定价方案</a></li>
            <li><a href="#">Canva可画 API</a></li>
        </ul>
        <ul>
            <li><strong>公司信息</strong></li>
            <li><a href="#">关于Canva可画</a></li>
            <li><a href="#">加入我们</a></li>
            <li><a href="#">使用条款</a></li>
            <li><a href="#">个人信息保护政策</a></li>
            <li><a href="#">帮助中心</a></li>
        </ul>
        
    </div>

    <div class="g-body-14">© 2025 保留所有权利, Canva®</div>
    
    <div class="g-tail">
        <div class="tail-select">
            <select name="font-style">
                <option value="#" checked>简体中文</option>
                <option value="#">繁体中文</option>
                <option value="#">English</option>
            </select>
        </div>
        <div class="tail-box-1"><a href="#"><div>隐私政策</div></a></div>
        <div class="tail-box-2"><a href="#"><div>条款</div></a></div>
        <div class="tail-box-1"><a href="#"><div>北京咖瓦信息技术有限公司</div></a></div>
        <div class="tail-box-3"><a href="#"><div>京ICP<p>18032728号</p></div></a></div>
        <div class="tail-box-4"><a href="#"><div>京公网安备<p>11010502055737号</p></div></a></div>
        <div class="tail-box-5"><a href="#"><div>网信算备 <p>110105663460001240029号</p></div></a></div>
        <div class="tail-box-5"><a href="#"><div>网信算备 <p>110105663460001240037号</p></div></a></div>
        <div class="tail-image">
            <a href="#"><img src="../图片素材/tail-image.1.png" alt=""></a>
            <a href="#"><img src="../图片素材/tail-image.2.png" alt=""></a>
            <a href="#"><img src="../图片素材/tail-image.3.png" alt=""></a>
            <a href="#"><img src="../图片素材/tail-image.4.png" alt=""></a>
        </div>
    </div>

    <!-- 新功能：回到顶部 -->
     <div class="u-back-top"><a href="#top">top</a></div>

</div>

</body>

</html>